<template>
  <div>
    <el-table
      :data="receieptList"
      size="mini"
      style="width: 600px"
      @cell-mouse-enter="handleCellEnter"
      @cell-mouse-leave="handleCellLeave"
      @cell-click="handleCellClick"
    >
      <el-table-column
        prop="id"
        label="实验编号"
        width="180">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" v-model="scope.row.id" placeholder="请输入内容"></el-input>
          <div class="item__txt">{{scope.row.id}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="recipe"
        label="配方成份"
        width="180">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" v-model="scope.row.recipe" placeholder="请输入内容"></el-input>

          <div class="item__txt">{{scope.row.recipe}}</div>
        </div>
      </el-table-column>
      <el-table-column
        prop="ration"
        label="成份比例（%）"
        width="180">
        <div class="item" slot-scope="scope">
            <el-input class="item__input" v-model="scope.row.ration" placeholder="请输入内容" @input="validateInput(scope.$index, scope.row)"></el-input>
            <div class="item__txt">{{scope.row.ration}}</div>
        </div>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="save(scope.row)" type="text" size="small">保存</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>

</template>

<script>
export default {
  name: 'Batch',
  props: {
    receieptList: Array,
    recieptId: Number
  },
  data () {
    return {
      // 需要编辑的属性
      editProp: ['ration'],
      // 保存进入编辑的cell
      clickCellMap: {}
    }
  },
  methods: {
    /** 限制成分比例输入框 */
    validateInput(index, row) {
      // 将输入值转换为数字
      let value = Number(row.ration);

      // 如果输入值不是数字，重置为原始值
      if (isNaN(value)) {
        row.ration = '';
      }
      // 如果输入值不在0-100范围内，重置为范围内的最接近的值
      else if (value < 0) {
        row.ration = '0';
      } else if (value > 100) {
        row.ration = '100';
      }
    },
    // /** 鼠标移入cell */
    // handleCellEnter (row, column, cell, event) {
    //   const property = column.property
    //   if (property === 'id' || property === 'recipe' || property === 'ration') {
    //     cell.querySelector('.item__txt').classList.add('item__txt--hover')
    //   }
    // },
    // /** 鼠标移出cell */
    // handleCellLeave (row, column, cell, event) {
    //   const property = column.property
    //   if (this.editProp.includes(property)) {
    //     cell.querySelector('.item__txt').classList.remove('item__txt--hover')
    //   }
    // },
    /** 点击cell */
    handleCellClick (row, column, cell, event) {
      const property = column.property
      if (this.editProp.includes(property)) {
        // 保存cell
        this.saveCellClick(row, cell)
        cell.querySelector('.item__txt').style.display = 'none'
        cell.querySelector('.item__input').style.display = 'block'
        cell.querySelector('input').focus()
      }
    },
    /** 取消编辑状态 */
    cancelEditable (cell) {
      cell.querySelector('.item__txt').style.display = 'block'
      cell.querySelector('.item__input').style.display = 'none'
    },
    /** 保存进入编辑的cell */
    saveCellClick (row, cell) {
      const id = row.id
      if (this.clickCellMap[id] !== undefined) {
        if (!this.clickCellMap[id].includes(cell)) {
          this.clickCellMap[id].push(cell)
        }
      } else {
        this.clickCellMap[id] = [cell]
      }
    },
    /** 保存数据 */
    save (row) {
      const id = row.id
      // 取消本行所有cell的编辑状态
      this.clickCellMap[id].forEach(cell => {
        this.cancelEditable(cell)
      })
      this.clickCellMap[id] = []
    }
  }
}
</script>

<style lang='scss'>
.item{
  .item__input{
    display: none;
    width: 100px;
    /* 调整elementUI中样式 如果不需要调整请忽略 */
    .el-input__inner{
      height: 24px!important;
    }
    /* 调整elementUI中样式 如果不需要调整请忽略 */
    .el-input__suffix{
      i{
        font-size: 12px !important;
        line-height: 26px !important;
      }
    }
  }
  .item__txt{
    box-sizing: border-box;
    border: 1px solid transparent;
    width: 100px;
    line-height: 24px;
    padding: 0 8px;
  }
  .item__txt--hover{
    border: 1px solid #dddddd;
    border-radius: 4px;
    cursor: text;
  }
}
</style>

